<template>
	<view class="contents">
		<view class="back">
			<image src="../../static/backwhite.png" mode="" @click="backPrePage"></image>
		</view>
		<view class="page_title">
			佣金提现
		</view>
		<view class="topbackgroundcolor">

		</view>
		<view class="main">
			<view class="canwithdrawal">
				<view class="canwithdrawal_title">
					可提现金额(元)
				</view>
				<view class="canwithdrawal_num">
					<text class="icon">￥</text><text class="num">{{commissioninformation.brokerage_price}}</text>
				</view>
			</view>
			<view class="withdrawal">
				<view class="withdrawal_title">
					提现金额
				</view>
				<view class="withdrawal_num">
					<view class="icon">
						￥
					</view>
					<input type="digit" class="withdrawal_amount" :placeholder="placeHolder" v-model="form.money"
						@input="inpMoney">
					<view class="withdrawal_all" @click="allWithdrawal">
						全部提现
					</view>
				</view>
				<view class="withdrawal_to">
					<view class="left">
						提现至
					</view>
					<view class="right">
						<view class="">
							微信
						</view>
						<!-- <image src="../../static/rightarrow.png" mode=""></image> -->
					</view>
				</view>
				<view class="weixinhao">
					<text>微信号</text>
					<input type="text" placeholder="请输入微信号" v-model="form.weixin">
				</view>
				<view class="withdrawal_btn" @click="gotoWithdrawal">
					立即提现
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		withdrawalPage,
		withdrawalApply
	} from '@/api/api.js'
	export default {
		data() {
			return {
				withdrawalnum: '',
				commissioninformation: {
					brokerage_price: 0.00,
					extract_min_money: 0.00,
				},
				form: {
					token:'',
					money:'',
					extract_type:'weixin',
					weixin:''
				}

			}
		},
		onLoad() {
			// 提现信息
			this.withdrawalPage()
		},
		computed:{
			placeHolder() {
				return `满${this.commissioninformation.extract_min_money}元可提现`
			}
		},
		methods: {
			// 返回上一页
			backPrePage() {
				uni.navigateBack()
			},
			// 限制输入数字
			inpMoney(e) {
				let that = this;
				let price = e.detail.value
				if (price.indexOf(".") == 0) {
					//'首位小数点情况'
					price = price.replace(/[^$#$]/g, "0.");
					price = price.replace(/\.{2,}/g, ".");
				}
				price = price.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				//重新赋值给input
				this.$nextTick(() => {
					this.withdrawalnum = price;
				});

			},
			// 提现信息--可提现额度
			withdrawalPage() {
				withdrawalPage().then(res => {
				console.log(res)
				let that = this
				withdrawalPage().then(res => {
					if (res.data.code == '200') {
						// console.log(res)
						this.commissioninformation = res.data.data
						if (this.commissioninformation.brokerage_price == null) {
							this.commissioninformation.brokerage_price = 0.00
						}
					} else {}
				})
			})
			},
			
			// 全部提现
			allWithdrawal() {
				if(this.commissioninformation.brokerage_price>0) {
					this.form.money = this.commissioninformation.brokerage_price
				}
				else {
					uni.showToast({
						title: '暂无可提现金额',
						icon:'error',
						duration: 2000
					});
				}
			},
			// 去提现
			gotoWithdrawal() {
				console.log(this.commissioninformation.extract_min_money,this.form.money)
				if(!this.form.money||this.form.money==0) {
					uni.showToast({
						title: '请输入提现金额',
						duration: 2000,
						mask:true,
						icon:'error'
					});
					return
				}
				if(!this.form.weixin) {
					uni.showToast({
						title: '请输入微信号',
						duration: 2000,
						mask:true,
						icon:'error'
					});
					return
				}
				if(this.commissioninformation.extract_min_money>this.form.money) {
					uni.showToast({
						title: '金额小于最低值',
						duration: 2000,
						mask:true,
						icon:'error'
					});
					return
				}
				this.form.token = uni.getStorageSync('userInfotow').data.token
				let data = this.form
				withdrawalApply(data).then(res => {
					// console.log(res)
					if(res.data.code='200') {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							mask:true,
							icon:'success'
						});
						this.form.money = 0
						this.withdrawalPage()
					}
					if(res.data.code='400') {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							mask:true,
							icon:'error'
						});
					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);

		.back {
			width: 36rpx;
			height: 36rpx;
			position: fixed;
			left: 36rpx;
			top: 110rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.page_title {
			position: fixed;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
			top: 110rpx;
		}

		.topbackgroundcolor {
			background-color: #1AB374;
			height: 600rpx;
			// background-image: url();
		}

		.main {
			width: 694rpx;
			margin: -420rpx auto 0;

			.canwithdrawal {
				padding-left: 28rpx;
				box-sizing: border-box;
				color: #fff;

				.canwithdrawal_num {
					.icon {}

					.num {
						font-size: 56rpx;
					}
				}
			}

			.withdrawal {
				width: 100%;
				margin-top: 50rpx;
				// margin: -260rpx auto;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 28rpx;

				.withdrawal_num {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
					margin: 48rpx 0;

					.icon {
						font-size: 64rpx;
						font-weight: 600;
					}

					.withdrawal_amount {
						margin-bottom: 10rpx;
					}

					.withdrawal_all {
						color: #1AB374;
					}
				}

				.withdrawal_to {
					display: flex;
					justify-content: space-between;

					.right {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
				.weixinhao {
					display: flex;
					margin-top: 28rpx;
					>text {
						margin-right: 20rpx;
					}
					>input {
						flex: 1;
					}
				}

				.withdrawal_btn {
					margin: 76rpx auto 0;
					color: #fff;
					background-color: #1AB374;
					border-radius: 10rpx;
					text-align: center;
					width: 540rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

			}
		}

		.canwithdrawal {}




	}
</style>
